// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';

type SvgProps = {
    width: number;
    height: number;
}

const CloudTrialSvg = (props: SvgProps) => (
    <svg
        width={props.width ? props.width.toString() : '372'}
        height={props.height ? props.height.toString() : '250'}
        viewBox='0 0 372 250'
        fill='none'
        xmlns='http://www.w3.org/2000/svg'
    >
        <g clipPath='url(#clip0)'>
            <g filter='url(#filter0_d)'>
                <rect
                    x='6'
                    y='20'
                    width='338'
                    height='197'
                    rx='8'
                    fill='white'
                />
                <rect
                    x='6'
                    y='20'
                    width='100.516'
                    height='197'
                    fill='#1E325C'
                />
                <circle
                    cx='22'
                    cy='39'
                    r='9'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='38'
                    y='33'
                    width='45'
                    height='5'
                    rx='2.5'
                    fill='white'
                    fillOpacity='0.32'
                />
                <rect
                    x='38'
                    y='41'
                    width='30'
                    height='3'
                    rx='1.5'
                    fill='white'
                    fillOpacity='0.32'
                />
                <rect
                    x='15'
                    y='60'
                    width='30'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <rect
                    x='16'
                    y='190'
                    width='29'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='76'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='29'
                    y='74'
                    width='57'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='126'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='30'
                    y='124'
                    width='57'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='93'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='30'
                    y='91'
                    width='49'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='142'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='30'
                    y='141'
                    width='49'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='109'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='30'
                    y='107'
                    width='64'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='159'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='30'
                    y='157'
                    width='64'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='204'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='30'
                    y='203'
                    width='64'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='19'
                    cy='176'
                    r='4'
                    fill='white'
                    fillOpacity='0.16'
                />
                <rect
                    x='30'
                    y='174'
                    width='43'
                    height='4'
                    rx='2'
                    fill='white'
                    fillOpacity='0.32'
                />
                <circle
                    cx='124'
                    cy='66'
                    r='8'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='59'
                    width='39'
                    height='4'
                    rx='2'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <rect
                    x='139'
                    y='68'
                    width='119'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='76'
                    width='98'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='84'
                    width='133'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='92'
                    width='70'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <circle
                    cx='124'
                    cy='118'
                    r='8'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='111'
                    width='39'
                    height='4'
                    rx='2'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <rect
                    x='139'
                    y='120'
                    width='119'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='128'
                    width='98'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='136'
                    width='133'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='144'
                    width='70'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <circle
                    cx='124'
                    cy='170'
                    r='8'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='163'
                    width='39'
                    height='4'
                    rx='2'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <rect
                    x='139'
                    y='172'
                    width='119'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='180'
                    width='98'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='188'
                    width='133'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='139'
                    y='196'
                    width='70'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <circle
                    cx='166.5'
                    cy='32.5'
                    r='2.5'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <circle
                    cx='320'
                    cy='36'
                    r='4'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <circle
                    cx='248'
                    cy='36'
                    r='4'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <circle
                    cx='177.5'
                    cy='32.5'
                    r='2.5'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <circle
                    cx='332'
                    cy='36'
                    r='4'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <rect
                    x='116'
                    y='31'
                    width='43'
                    height='3'
                    rx='1.5'
                    fill='#3F4350'
                    fillOpacity='0.24'
                />
                <rect
                    x='256'
                    y='32'
                    width='55'
                    height='8'
                    rx='4'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <rect
                    x='133'
                    y='40'
                    width='66'
                    height='1'
                    rx='0.5'
                    fill='#3F4350'
                    fillOpacity='0.08'
                />
                <circle
                    cx='118.5'
                    cy='40.2079'
                    r='2.5'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <ellipse
                    cx='126.5'
                    cy='40.2128'
                    rx='2.5'
                    ry='2.5049'
                    fill='#3F4350'
                    fillOpacity='0.16'
                />
                <rect
                    x='5'
                    y='19'
                    width='340'
                    height='199'
                    rx='9'
                    stroke='#3F4350'
                    strokeOpacity='0.04'
                    strokeWidth='2'
                />
            </g>
            <path
                d='M217.487 89.5394C229.639 77.858 243.676 72.0115 259.598 72C275.521 71.9885 289.563 77.835 301.726 89.5394C311.984 99.6693 318.199 113.202 319.206 127.597C320.212 141.993 315.941 156.262 307.194 167.726L316.308 176.857L304.632 188.556L295.519 179.425C284.094 187.973 270.012 192.18 255.781 191.296C241.44 190.434 228.676 184.651 217.487 173.946C205.829 161.759 200 147.688 200 131.734C200 115.78 205.829 101.715 217.487 89.5394Z'
                fill='#B3B3B3'
            />
            <path
                d='M225.378 97.2236C234.548 87.9772 246.012 83.2277 259.768 82.975C272.623 82.9932 284.946 88.118 294.035 97.2258C303.125 106.334 308.24 118.681 308.258 131.562C308.017 145.448 303.277 156.935 294.038 166.02C284.918 175.106 272.627 180.278 259.768 180.441C245.909 179.959 234.445 175.152 225.378 166.02C216.31 156.889 211.513 145.402 210.985 131.562C211.148 118.677 216.31 106.361 225.378 97.2236Z'
                fill='#F2F2F2'
            />
            <path
                d='M227.029 160.783C231.525 165.299 236.866 168.882 242.747 171.327C248.628 173.772 254.932 175.031 261.298 175.031C267.665 175.031 273.969 173.772 279.85 171.327C285.73 168.882 291.072 165.299 295.568 160.783C300.774 155.646 304.763 149.405 307.244 142.519C305.237 151.646 300.681 160.012 294.107 166.64C284.955 175.768 272.569 180.892 259.656 180.892C246.744 180.892 234.358 175.768 225.206 166.64C218.626 160.016 214.069 151.648 212.069 142.519C210.114 133.638 210.747 124.38 213.892 115.849C212.195 123.646 212.449 131.743 214.631 139.418C216.894 147.475 221.16 154.826 227.029 160.783Z'
                fill='#999999'
            />
            <path
                d='M357.006 243.535C353.963 244.379 351.727 244.086 350.266 242.622L302.498 190.762C301.773 190.025 301.231 189.129 300.914 188.144C300.598 187.16 300.516 186.115 300.675 185.093C301.286 182.085 302.812 179.34 305.043 177.237C307.178 175.009 309.895 173.427 312.884 172.671C313.92 172.457 314.996 172.532 315.993 172.887C316.99 173.243 317.872 173.865 318.541 174.687L370.676 222.55C372.138 224.014 372.396 226.202 371.416 229.114C370.226 232.388 368.363 235.376 365.948 237.884C363.501 240.505 360.421 242.451 357.006 243.535Z'
                fill='#FFBC1F'
            />
            <path
                d='M360.119 212.66L340.791 232.388L317.097 206.819L334.601 189.28L360.119 212.66Z'
                fill='#954D0E'
            />
        </g>
        <defs>
            <filter
                id='filter0_d'
                x='-8'
                y='14'
                width='366'
                height='225'
                filterUnits='userSpaceOnUse'
                colorInterpolationFilters='sRGB'
            >
                <feFlood
                    floodOpacity='0'
                    result='BackgroundImageFix'
                />
                <feColorMatrix
                    in='SourceAlpha'
                    type='matrix'
                    values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
                    result='hardAlpha'
                />
                <feOffset dy='8'/>
                <feGaussianBlur stdDeviation='6'/>
                <feColorMatrix
                    type='matrix'
                    values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0'
                />
                <feBlend
                    mode='normal'
                    in2='BackgroundImageFix'
                    result='effect1_dropShadow'
                />
                <feBlend
                    mode='normal'
                    in='SourceGraphic'
                    in2='effect1_dropShadow'
                    result='shape'
                />
            </filter>
            <clipPath id='clip0'>
                <rect
                    width='372'
                    height='250'
                    fill='white'
                />
            </clipPath>
        </defs>
    </svg>

);

export default CloudTrialSvg;
